// 编辑器设置面板
// 编辑器相关的所有设置选项

import React from 'react';
import { SettingItem } from '../components/SettingItem';
import { BaseSetting, SettingsCategory, SettingType } from '../../../types/settings';

// 编辑器设置定义
const editorSettings: BaseSetting[] = [
  // 基础设置组
  {
    id: 'editor.fontSize',
    name: '字体大小',
    description: '编辑器中代码的字体大小（像素）',
    category: SettingsCategory.Editor,
    type: SettingType.Number,
    defaultValue: 14,
    currentValue: 14,
    group: 'basic',
    validation: {
      min: 8,
      max: 72
    },
    tags: ['字体', '大小', '编辑器']
  },
  {
    id: 'editor.fontFamily',
    name: '字体系列',
    description: '编辑器使用的字体系列',
    category: SettingsCategory.Editor,
    type: SettingType.Font,
    defaultValue: 'Consolas, "Courier New", monospace',
    currentValue: 'Consolas, "Courier New", monospace',
    group: 'basic',
    tags: ['字体', '系列', '编辑器']
  },
  {
    id: 'editor.lineHeight',
    name: '行高',
    description: '代码行之间的间距倍数',
    category: SettingsCategory.Editor,
    type: SettingType.Number,
    defaultValue: 1.5,
    currentValue: 1.5,
    group: 'basic',
    validation: {
      min: 1.0,
      max: 3.0
    },
    tags: ['行高', '间距', '编辑器']
  },
  {
    id: 'editor.tabSize',
    name: '制表符大小',
    description: '制表符对应的空格数量',
    category: SettingsCategory.Editor,
    type: SettingType.Number,
    defaultValue: 2,
    currentValue: 2,
    group: 'basic',
    validation: {
      min: 1,
      max: 8
    },
    tags: ['制表符', '缩进', '空格']
  },
  {
    id: 'editor.insertSpaces',
    name: '使用空格缩进',
    description: '按Tab键时插入空格而不是制表符',
    category: SettingsCategory.Editor,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'basic',
    tags: ['缩进', '空格', '制表符']
  },
  {
    id: 'editor.wordWrap',
    name: '自动换行',
    description: '当行内容超出编辑器宽度时自动换行',
    category: SettingsCategory.Editor,
    type: SettingType.Boolean,
    defaultValue: false,
    currentValue: false,
    group: 'basic',
    tags: ['换行', '自动', '编辑器']
  },
  {
    id: 'editor.showLineNumbers',
    name: '显示行号',
    description: '在编辑器左侧显示行号',
    category: SettingsCategory.Editor,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'basic',
    tags: ['行号', '显示', '编辑器']
  },
  {
    id: 'editor.showMinimap',
    name: '显示小地图',
    description: '在编辑器右侧显示代码小地图',
    category: SettingsCategory.Editor,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'basic',
    tags: ['小地图', '显示', '编辑器']
  },

  // 编辑行为组
  {
    id: 'editor.autoSave',
    name: '自动保存',
    description: '编辑后自动保存文件',
    category: SettingsCategory.Editor,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'editing',
    tags: ['自动保存', '保存', '编辑器']
  },
  {
    id: 'editor.autoSaveDelay',
    name: '自动保存延迟',
    description: '停止编辑后多少毫秒自动保存',
    category: SettingsCategory.Editor,
    type: SettingType.Number,
    defaultValue: 1000,
    currentValue: 1000,
    group: 'editing',
    validation: {
      min: 100,
      max: 10000
    },
    tags: ['自动保存', '延迟', '毫秒']
  },
  {
    id: 'editor.formatOnSave',
    name: '保存时格式化',
    description: '保存文件时自动格式化代码',
    category: SettingsCategory.Editor,
    type: SettingType.Boolean,
    defaultValue: false,
    currentValue: false,
    group: 'editing',
    tags: ['格式化', '保存', '代码']
  },
  {
    id: 'editor.trimTrailingWhitespace',
    name: '删除行尾空格',
    description: '保存时自动删除行尾的空白字符',
    category: SettingsCategory.Editor,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'editing',
    tags: ['空格', '行尾', '删除']
  },

  // 代码提示组
  {
    id: 'editor.quickSuggestions',
    name: '快速建议',
    description: '输入时显示代码建议',
    category: SettingsCategory.Editor,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'suggestions',
    tags: ['建议', '提示', '代码']
  },
  {
    id: 'editor.acceptSuggestionOnEnter',
    name: '回车接受建议',
    description: '按回车键接受当前选中的建议',
    category: SettingsCategory.Editor,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'suggestions',
    tags: ['建议', '回车', '接受']
  },

  // 光标和选择组
  {
    id: 'editor.cursorBlinking',
    name: '光标闪烁',
    description: '光标的闪烁动画效果',
    category: SettingsCategory.Editor,
    type: SettingType.Select,
    defaultValue: 'blink',
    currentValue: 'blink',
    group: 'cursor',
    validation: {
      options: [
        { value: 'blink', label: '闪烁' },
        { value: 'smooth', label: '平滑' },
        { value: 'phase', label: '渐变' },
        { value: 'expand', label: '展开' },
        { value: 'solid', label: '固定' }
      ]
    },
    tags: ['光标', '闪烁', '动画']
  },
  {
    id: 'editor.cursorStyle',
    name: '光标样式',
    description: '光标的显示样式',
    category: SettingsCategory.Editor,
    type: SettingType.Select,
    defaultValue: 'line',
    currentValue: 'line',
    group: 'cursor',
    validation: {
      options: [
        { value: 'line', label: '竖线' },
        { value: 'block', label: '方块' },
        { value: 'underline', label: '下划线' }
      ]
    },
    tags: ['光标', '样式', '显示']
  }
];

// 设置组配置
const settingGroups = [
  {
    id: 'basic',
    name: '基础设置',
    description: '字体、缩进、换行等基本编辑器设置'
  },
  {
    id: 'editing',
    name: '编辑行为',
    description: '自动保存、格式化等编辑行为设置'
  },
  {
    id: 'suggestions',
    name: '代码提示',
    description: '智能提示和代码补全设置'
  },
  {
    id: 'cursor',
    name: '光标和选择',
    description: '光标样式和选择行为设置'
  }
];

export const EditorSettingsPanel: React.FC = () => {
  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
          编辑器设置
        </h2>
        <p className="text-gray-600 dark:text-gray-400">
          配置代码编辑器的外观和行为
        </p>
      </div>

      {settingGroups.map((group) => {
        const groupSettings = editorSettings.filter(s => s.group === group.id);
        
        return (
          <div key={group.id} className="space-y-4">
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                {group.name}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {group.description}
              </p>
            </div>
            
            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
              <div className="divide-y divide-gray-200 dark:divide-gray-700">
                {groupSettings.map((setting) => (
                  <div key={setting.id} className="px-4">
                    <SettingItem setting={setting} />
                  </div>
                ))}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};
